<template>
  <div id="agnesresult">
    <el-steps :active=3 simple style="margin-bottom: 10px">
      <el-step title="简介" icon="el-icon-info"></el-step>
      <el-step title="上传" icon="el-icon-upload2"></el-step>
      <el-step title="策略及参数" icon="el-icon-setting"></el-step>
      <el-step title="结果及可视化" icon="el-icon-finished"></el-step>
    </el-steps>
    <el-container>
      <el-aside width="7%">
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <el-button @click="changeChart" v-if="canChange"><i class="el-icon-d-arrow-left"></i></el-button>
      </el-aside>
      <div id="ec"></div>
      <el-aside width="7%">
        <el-button @click="download" icon="el-icon-download" type="success" circle></el-button>
        <br>
        <br>
        <el-button type="primary" @click="again" icon="el-icon-refresh" circle></el-button>
        <br>
        <br>
        <el-button type="warning" @click="inper" icon="el-icon-edit" circle></el-button>
        <br>
        <br>
        <el-button type="danger" @click="downJar" icon="el-icon-folder-opened" circle></el-button>
        <br>
        <br>
        <br>
        <br>
        <br>
        <el-button @click="changeChart" v-if="canChange"><i class="el-icon-d-arrow-right"></i></el-button>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";

export default {
  name: "AGNESResult",
  data() {
    return {
      myChart: {},
      isTwo: false,
      time: "",
      canChange: false,
      options: [],
      idx: 0,
      resultFileName: ''
    }
  },
  methods: {
    again() {
      location.replace("#/agnes/resume")
    },
    inper() {
      location.replace("#/inner/resume")
    },
    downJar() {
      window.open("http://localhost:8080/cluster-algorithm-2.0-SNAPSHOT.jar")
    },
    changeChart() {
      this.idx = this.idx == 0 ? 1 : 0;
      this.myChart = echarts.init(document.getElementById("ec"))
      this.myChart.clear()
      this.myChart.setOption(this.options[this.idx])
    },
    download() {
      window.open("http://localhost:8080/" + this.resultFileName)
    },
    getResultName() {
      var that = this
      axios.get("http://localhost:8080/agnes/result").then(
        function (response) {
          that.resultFileName = response.data
        }, function (err) {
        })
    },
    loadChart() {
      this.myChart = echarts.init(document.getElementById("ec"))
      this.myChart.setOption(this.options[this.idx])
    },
    getTime() {
      var that = this
      axios.get("http://localhost:8080/agnes/gettime").then(
        function (response) {
          that.time = response.data / 1000
        }, function (err) {
        })
    },
    loadData() {
      var that = this;
      axios.get("http://localhost:8080/agnes/sizeequals2").then(
        function (response) {
          if (response.data) {
            that.canChange = true
            axios.get("http://localhost:8080/agnes/scatter").then(
              function (response) {
                var clusters = []
                for (var i in response.data) {
                  var sum = 0
                  var j = 0
                  for (j in response.data[i].pointList) {
                    sum += response.data[i].pointList[j][0]
                  }
                  j++
                  var avg = sum / j;
                  clusters.push({
                    name: response.data[i].clusterName,
                    type: 'scatter',
                    data: response.data[i].pointList,
                    markArea: {
                      silent: true,
                      itemStyle: {
                        normal: {
                          color: 'transparent',
                          borderWidth: 1,
                          borderType: 'dashed'
                        }
                      },
                      data: [
                        [{
                          name: response.data[i].clusterName + '分布区间',
                          xAxis: 'min',
                          yAxis: 'min'
                        }, {
                          xAxis: 'max',
                          yAxis: 'max'
                        }]
                      ]
                    },
                    markPoint: {
                      data: [{
                        type: 'max',
                        name: response.data[i].clusterName + '最大值'
                      }, {
                        type: 'min',
                        name: response.data[i].clusterName + '最小值'
                      }]
                    },
                    markLine: {
                      lineStyle: {
                        normal: {
                          type: 'solid'
                        }
                      },
                      data: [{
                        type: 'average',
                        name: response.data[i].clusterName + '平均值'
                      }, {
                        name: response.data[i].clusterName + "平均值",
                        xAxis: avg
                      }]
                    }
                  })
                }
                that.options.push({
                  title: {
                    text: that.resultFileName + "散点图",
                    subtext: "使用AGNES算法聚为" + clusters.length + "类，用时" + that.time + "秒"
                  },
                  grid: {
                    left: '3%',
                    right: '7%',
                    bottom: '5%',
                    containLabel: true
                  },
                  tooltip: {
                    showDelay: 0,
                    formatter: function (params) {
                      if (params.value.length > 1) {
                        return params.seriesName + ' :<br/>' +
                          params.value[0] + " " + params.value[1];
                      } else {
                        return params.name.slice(0, -3) + ' :<br/>' +
                          params.name.slice(-3) + ' : ' + params.value;
                      }
                    },
                    axisPointer: {
                      show: true,
                      type: 'cross',
                      lineStyle: {
                        type: 'dashed',
                        width: 1
                      }
                    },
                  },
                  legend: {
                    data: clusters[name],
                    left: 'center',
                    right: '7%',
                    bottom: '0%'
                  },
                  xAxis: [{
                    type: 'value',
                    scale: true,
                    axisLabel: {
                      formatter: '{value}'
                    },
                    splitLine: {
                      show: false
                    }
                  }],
                  yAxis: [{
                    type: 'value',
                    scale: true,
                    axisLabel: {
                      formatter: '{value}'
                    },
                    splitLine: {
                      show: false
                    }
                  }],
                  series: clusters
                })
                axios.get("http://localhost:8080/agnes/bar").then(
                  function (response) {
                    var clusterMean = []
                    var clusterNames = []
                    var clusterNum = response.data['column-0']['avgList'].length
                    for (let i = 0; i < clusterNum; i++) {
                      clusterNames.push('cluster-' + i)
                    }
                    for (var index in response.data) {
                      clusterMean.push({
                        name: response.data[index].columnName,
                        type: 'bar',
                        barWidth: '15%',
                        itemStyle: {
                          normal: {
                            barBorderRadius: 12
                          }
                        },
                        data: response.data[index].avgList
                      })
                    }
                    that.options.push({
                      title: {
                        text: that.resultFileName + "样本中心条形图",
                        subtext: "使用AGNES算法聚为" + clusterNum + "类，用时" + that.time + "秒"
                      },
                      tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                          type: 'shadow'
                        }
                      },
                      grid: {
                        left: '2%',
                        right: '4%',
                        bottom: '5%',
                        top: '16%',
                        containLabel: true
                      },
                      legend: {
                        data: clusterMean[name],
                        right: 10,
                        top: 12,
                        itemWidth: 12,
                        itemHeight: 10
                      },
                      xAxis: {
                        type: 'category',
                        data: clusterNames,
                        axisLine: {},
                        axisLabel: {
                          textStyle: {
                            fontFamily: 'Microsoft YaHei'
                          }
                        }
                      },
                      yAxis: {
                        type: 'value',
                        scale: true,
                        min: '0',
                        axisLine: {
                          show: false,
                        },
                        splitLine: {
                          show: true,
                        },
                        axisLabel: {}
                      },
                      series: clusterMean
                    })
                    that.loadChart()
                  }, function (err) {
                  })
              }, function (err) {
              })
          } else {
            axios.get("http://localhost:8080/agnes/bar").then(
              function (response) {
                var clusterMean = []
                var clusterNames = []
                var clusterNum = response.data['column-0']['avgList'].length
                for (let i = 0; i < clusterNum; i++) {
                  clusterNames.push('cluster-' + i)
                }
                console.log(clusterNames)
                for (var index in response.data) {
                  clusterMean.push({
                    name: response.data[index].columnName,
                    type: 'bar',
                    barWidth: '15%',
                    itemStyle: {
                      normal: {
                        barBorderRadius: 12
                      }
                    },
                    data: response.data[index].avgList
                  })
                }
                that.options.push({
                  title: {
                    text: that.resultFileName + "样本中心条形图",
                    subtext: "使用AGNES算法聚为" + clusterNum + "类，用时" + that.time + "秒"
                  },
                  tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                      type: 'shadow'
                    }
                  },
                  grid: {
                    left: '2%',
                    right: '4%',
                    bottom: '5%',
                    top: '16%',
                    containLabel: true
                  },
                  legend: {
                    data: clusterMean[name],
                    right: 10,
                    top: 12,
                    itemWidth: 12,
                    itemHeight: 10
                  },
                  xAxis: {
                    type: 'category',
                    data: clusterNames,
                    axisLine: {},
                    axisLabel: {
                      textStyle: {
                        fontFamily: 'Microsoft YaHei'
                      }
                    }
                  },
                  yAxis: {
                    type: 'value',
                    scale: true,
                    min: '0',
                    axisLine: {
                      show: false,
                    },
                    splitLine: {
                      show: true,
                    },
                    axisLabel: {}
                  },
                  series: clusterMean
                })
                that.loadChart()
              }, function (err) {
              })
          }
        }, function (err) {
        })
    }
  },
  mounted() {
    this.getResultName()
    this.loadData()
    this.getTime()
  }
}
</script>

<style scoped>
#ec {
  width: 900px;
  height: 556px;
}
</style>
